<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<link href="../assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
		<link href="../assets/bootstrap-table/css/bootstrap-table.min.css" rel="stylesheet" />
		
		<script src="../assets/jquery/jquery-1.9.1.min.js"></script>
		<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
		<script src="../assets/bootstrap-table/js/bootstrap-table.min.js"></script>
		<script src="../assets/bootstrap-table/js/bootstrap-table-zh-CN.min.js"></script>
		
		<style type="text/css">
			.row{
				margin:0;
			}
			.bootstrap-table .table:not(.table-condensed), .bootstrap-table .table:not(.table-condensed)>tbody>tr>td, .bootstrap-table .table:not(.table-condensed)>tbody>tr>th, .bootstrap-table .table:not(.table-condensed)>tfoot>tr>td, .bootstrap-table .table:not(.table-condensed)>tfoot>tr>th, .bootstrap-table .table:not(.table-condensed)>thead>tr>td{padding:20px;}
		</style>
		
	</head>
	<body>
		
		<div class="page-content">
			<div class="row">
				<div class="col-xs-12">ShowSerson</div>
			</div>
			<div class="row">
				<div class="col-xs-12">
					<table id="table_data"></table>
				</div>
			</div>
		</div>
		
		<script type="text/javascript">
			var basePath="<%=basePath %>";
			$(function () {
	
			    //初始化Table
				initTable();
				getPersonData();
			});
			
			function initTable(){
				$("#table_data").bootstrapTable("destroy");  
				$("#table_data").bootstrapTable({
					url: basePath+"/person/getPersonData",
					method: "get",  // 使用get请求到服务器获取数据
			        striped: true,
			        pagination: true, 
			        pageSize: 5,    
			        pageNumber:1, 
			        pageList: [1,2,3,4,5],
			        search: false,  // 是否启用查询
			        clickToSelect: true, 
			        sidePagination: "server", // 表示服务端请求
			        queryParamsType : "undefined",
			        dataType:"json",
			        queryParams: function queryParams(params) {   // 设置查询参数
			        	params.newDate=Math.random();
				        return params;
			      	},
			      	onLoadSuccess: function(data){// 加载成功时执行
			      		console.log(data);
				    },
			        onLoadError: function(){  // 加载失败时执行
				        alert("加载数据失败");  
				    },
					onClickRow: function(row,index){  // 加载成功时执行
				    },
					columns: [ 
						  {field: 'pid',align: 'center',width: '10%',title: '人物id'},
						  {field: 'pname',align: 'left',width: '20%',title: '人名'},
						  {field: 'age',align: 'center',width: '20%',title: '年龄'},
						  {field: 'deptid',align: 'left',width: '10%',title: '部门id'},
						  {field: 'dname',align: 'center',width: '20%',title: '部门名称'},
						  {field: 'loc',align: 'center',width: '20%',title: '部门地址'}
						]
				});
				//单击事件
				$('#table_data').on('click-row.bs.table', function (e, row, element)   {
				    //alert(row.ID);
				});
			}
			
			function getPersonData(){
        		$.ajax({
        			url:"http://localhost:8080/firweb/person/getPersonData",
        			type:"post",
        			data:{"pageNumber":1,"pageSize":3},
        			dataType:"json",
        			success:function(data){
        				console.log(data);
        				
        			},
        			error:function(data){
        				console.log(data);
        			}
        			
        		});
        	}
			
		</script>
	</body>
</html>